<template>
  <div class="sweepLogin">
    <div class="userInfo" v-if="isLogin">
      <div class="name_portrait">
        <el-row>
          <el-col :span="24">
            <div class="bg-purple Info">
              <div>
                <img :class="{ girl: personalInfo.sex !== 1 }" :src="personalInfo.photo" alt />
              </div>
              <div>
                <h3>Hi，{{ personalInfo.name }}</h3>
                <h6>欢迎回来</h6>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="Read_feedback">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple InfoSee">
              <div>
                <h3 class="nums colB">{{ personalInfo.viewCount > 99 ? '99+' : personalInfo.viewCount }}</h3>
                <h6 class="qyfk">企业看过</h6>
              </div>
              <div>
                <h3 class="nums colY">{{ feedbackCount > 99 ? '99+' : feedbackCount }}</h3>
                <h6 class="qyfk">企业反馈</h6>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="resume">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple InfoSee">
              <div @click="toMyResume">
                <h3 class="nums colB imgIcon">
                  <!--  @click="seeComapny" -->
                  <img src="../../../assets/img/myJl.png" alt />
                </h3>
                <h6 class="qyfk">我的简历</h6>
              </div>
              <div @click="refreshResume">
                <h3 class="nums colY imgIcon">
                  <!--  @click="refish" -->
                  <img src="../../../assets/img/refishJl.png" alt />
                </h3>
                <h6 class="qyfk">刷新简历</h6>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else @keyup.enter="submitForm" class="login_count">
      <div>
        <el-row>
          <el-col :span="12">
            <div class="loginWidth">个人登录</div>

          </el-col>
          <el-col :span="12">
            <div class="loginWidth accountLogin">
              <a class="loginWidth toCompany" :href="baseURL + '/company/#/login'">企业登录</a>
            </div>

          </el-col>
        </el-row>
      </div>
      <div class="fromIpt">
        <!-- <el-form :model="param" ref="numberValidateForm" class="demo-ruleForm">
          <div v-if="loginType===2">
            <el-form-item label-width="0px" prop="account" :rules="[
            { required: true, message: '账号不能为空'},
          ]">
              <el-input placeholder="请输入账号" v-model="param.account" autocomplete="off"></el-input>
            </el-form-item>

       
            <el-form-item label-width="0px" prop="password" :rules="[
                { required: true, message: '密码不能为空'}
              ]">
              <el-input type="password" placeholder="密码" v-model="param.password"></el-input>
            </el-form-item>
            <el-row :gutter="14">
              <el-col :span="14">

                <el-form-item label-width="0px" prop="captchaCode" :rules="captchaCode" class="captchaCode">
                  <el-input placeholder="图形验证码" v-model="param.captchaCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <img :src="imagePath" alt class="VerificationImg" @click="VerificationImg" />
              </el-col>
            </el-row>
          </div>

      
          <div v-else>
            <el-form-item label-width="0px" prop="phone" :rules="[
            { required: true, message: '手机号不能为空'},
            { type: 'number', message: '手机号必须为数字值'}
          ]">
              <el-input type="age" placeholder="请输入手机号" v-model.number="param.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-row :gutter="14">
              <el-col :span="14">
   
                <el-form-item label-width="0px" prop="captchaCode" :rules="captchaCode" class="captchaCode">
                  <el-input placeholder="图形验证码" v-model="param.captchaCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <img :src="imagePath" alt class="VerificationImg" @click="VerificationImg" />
              </el-col>
            </el-row>

     
            <el-form-item class="sendCode" prop="smsCode"
              :rules="[{ required:true, message: '验证码不能为空',tigger:'change'}]">
              <el-input placeholder="短信验证码" v-model="param.smsCode">
                <el-button slot="append" @click="postMessage" :class="{'disabled':countDown}">
                  发送验证码
                  <span v-show="countDown">({{countDown}})</span>
                </el-button>
              </el-input>
            </el-form-item>
          </div>

  
          <el-row :gutter="24">
            <el-col :span="12">
       
              <div class="btn" @click="submitForm">登录</div>
            </el-col>
            <el-col :span="12">
              <div class="sendBtn" @click="passWordLogin">{{ this.loginType===1 ? '密码登录' : '手机验证码登陆'}}</div>
            </el-col>
          </el-row>
        </el-form> -->

        <!-- <el-row :gutter="14">
          <el-col :span="24">

            <div class="setLogin">
              <el-checkbox v-model="checked">自动登录</el-checkbox>
              <el-link :href="baseURL+'/person/#/findPassword'" target="_blank">忘记密码？</el-link>
            </div>
          </el-col>
        </el-row> -->
        <!-- <el-row :gutter="14">
          <el-col :span="24">

            <div class="setLogin">

    <img src="../../../assets/img/wx.png" alt="">
            </div>
          </el-col>
        </el-row>  -->

        <!-- 注册找工作 免费发职位 -->
        <el-row>
          <el-col :span="24" style="text-align: center">
            <img :src="src" alt="" style="width: 249px; height: 243px" />
            <!-- <div>
                            <span v-if="!show" class="ewm">{{ times }}秒后过期</span>

                            <span v-if="show" class="ewm">已过期</span>
                            

                        </div> -->
            <div>
              <span class="ewm">请用微信扫描二维码登录</span>
              <a href="javascript:;" @click="ewmsx">刷新</a>
            </div>
            <!-- <div class="register">
              <el-link type="primary" :href="baseURL+'/person/#/register'" target="_blank">注册找工作</el-link>
              <el-link type="primary" :href="baseURL+'/company/#/register'" target="_blank">免费发职位</el-link>
            </div> -->
          </el-col>
        </el-row>
        <div class="motk" v-show="times == 0"></div>
        <div class="motk_title" v-show="times == 0">
          <!-- 您的二维码已失效，请点击下方刷新按钮 -->
          <img src="@/assets/img/wxewmgq.png" alt="" />
        </div>
      </div>
      <!-- 订单 -->
      <!-- <div class="zEs-Od-wrap zEs-PayW">
       <div class="zES-Pay-WxBox">
        <div class="zES-Pay-WxWrap">
         <p style="margin-left:-17px;">距离二维码过期还剩<font id="timesup"></font>，过期后请重新获取二维码。<input type="button" id="reloadPage" onclick="reloadPage();" value="重新获取" disabled="true" /></p >
         <div class="zES-Pay-Wximg clear">
          <div class="zES-Pay-WxCored">
           <div class="zES-Pay-WxCoredimg"><img src=""></div>
           <div class="zES-Pay-WxCoredtxt">使用微信扫一扫，扫描二维码支付</div>
          </div>
          <div class="zES-Pay-WxMob"></div>
         </div>
        </div>
       </div>
     </div> -->
    </div>
  </div>
  <!-- <div class="fromIpt" v-if="isActive === 1">
                <div class="qrCode">
                    <div class="shix" v-if="shixiao">
                        <p></p>
                    </div>
                </div>
                <p class="explain"></p>
                <h4 class="downLoad"></h4>
            </div>-->
  <!-- </div> -->
  <!-- </div> -->
</template>
<script>
import {
  login,
  captchaImg,
  postMsg,
  getPersonalInfo,
  feedbackCount,
  refreshResume,
  getUserlogin,
  wxLogin
} from '../../../api/login';
import { encrypt } from '../../../utils/unitFile';
import bus from '../../common/bus';
export default {
  name: 'publicLogin',
  data () {
    // 检验图片验证码是否正确
    var checkImage = (rule, value, callback) => {
      console.log('图片');

      if (value.length > 3) {
        captchaImg({ code: this.param.captchaCode, uuid: this.param.captchaUUid }).then(data => {
          if (data.data) {
            this.checkImage = true;
            callback();
          } else {
            callback(new Error('请输入正确验证码'));
          }
        });
      } else {
        callback();
      }
    };
    return {
      feedbackCount: 0,
      checked: false,
      clickTime: 0,
      checkImage: false,
      scene: '',
      baseURL: '',
      imagePath: '',
      sp: '',
      // 手机验证码登录
      isLogin: false,
      countDown: '',
      personalInfo: {},
      times: 60,
      timersta: '',
      timerlogin: '',
      show: true,
      src: '',
      param: {
        phone: '',
        account: '',
        password: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: ''
      },
      loginType: 1,
      captchaCode: [{ required: true, message: '验证码不能为空' }, { validator: checkImage }]
    };
  },
  methods: {
    // 跳转至我的简历
    toMyResume () {
      console.log(localStorage.getItem('ps_Authorization'), 'ddddd');
      window.open(`${this.baseURL}/person/#/index/PersonalCenter`);
    },
    refreshResume () {
      refreshResume(this.personalInfo.id, this.ps).then(data => {
        if (data.success) {
          this.$message.success('刷新成功');
        } else {
          this.$$message.error(`${data.msg}`);
        }
      });
    },
    // 发送短信验证码
    postMessage () {
      if (this.param.phone) {
        if (this.checkImage) {
          if (this.countDown) {
            return;
          }
          let query = {
            phone: this.param.phone,
            uuid: this.param.captchaUUid,
            code: this.param.captchaCode,
            type: 2
          };
          postMsg(query).then(data => {
            if (data.success) {
              // 短信发送成功,通过定时器倒计时
              let previous = this.clickTime;
              let now = new Date();
              if (now - previous > 60000) {
                console.log(1);
                this.clickTime = new Date();
                this.countDown = 60;
                let timerMin = setInterval(() => {
                  this.countDown -= 1;
                }, 1000);
                let timer = setTimeout(() => {
                  this.countDown = '';
                  clearInterval(timerMin);
                  clearTimeout(timer);
                }, 60000);
              }
            } else {
              this.checkImage = false;
              this.$message.error(`${data.msg}`);
              // this.VerificationImg();
            }
          });
        } else {
          this.$message.error('请正确输入图片验证码');
        }
      } else {
        this.$message.error('请输入手机号');
      }
    },
    // 登录
    submitForm () {
      this.$refs.numberValidateForm.validate(valid => {
        console.log(valid);
        if (valid) {
          let query = {
            account: this.param.phone || this.param.account,
            password: encrypt(this.param.password),
            captchaCode: this.param.captchaCode,
            captchaUUid: this.param.captchaUUid,
            smsCode: this.param.smsCode,
            loginType: this.loginType,
            captchaChannelType: 2
          };
          login(query).then(data => {
            if (data.success) {
              console.log(data, '登陆成功的信息');
              this.$message.success('登陆成功');
              this.isLogin = true;
              bus.$emit('changeIsLogin', true);
              bus.$emit('changeUserName', data.data.userName);
              this.getPersonalInfo();
              localStorage.setItem('ps_userName', data.data.userName);
              localStorage.setItem('ps_userId', data.data.userId);
            } else {
              this.$message.error(`${data.msg}`);
              // this.VerificationImg();
            }
          });
        } else {
          console.log('错误!!');
          return false;
        }
      });
    },
    // 切换密码登录或者验证码登录
    passWordLogin () {
      this.loginType === 1 ? (this.loginType = 2) : (this.loginType = 1);
      this.param = {
        phone: '',
        account: '',
        password: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: ''
      };
    },
    // 获取个人信息
    getPersonalInfo () {
      this.ps = localStorage.getItem('ps_Authorization');
      getPersonalInfo(this.ps)
        .then(data => {
          if (data.success) {
            console.log(data, '获取个人信息');
            this.personalInfo = data.data && data.data.length > 0 ? data.data[0] : {};
            this.isLogin = true;
            return feedbackCount(this.ps);
          } else {
            this.$message.error(`${data.msg}`);
          }
        })
        .then(data => {
          this.feedbackCount = data.data || 0;
        });
    },
    timestamp () {
      this.timersta = setInterval(() => {
        console.log(33333);
        //  var str = timestamp.substring(8, timestamp.length);
        this.getUserlogin();
      }, 60000);
    },
    getUserlogin () {
      var timestamp = new Date().getTime() + '';
      timestamp = timestamp.substring(0, 8);
      getUserlogin().then(data => {
        if (data.success) {
          this.src = data.data.url;
          this.scene = data.data.scene;
        }
      });
    },
    wxLogin () {
      this.timerlogin = setInterval(() => {
        var timestamp = new Date().getTime() + '';
        timestamp = timestamp.substring(0, 8);
        // let quary = {
        //     sceneId: timestamp
        // };
        var formData = new FormData();
        formData.append('sceneId', this.scene);
        wxLogin(formData).then(data => {
          if (data.success) {
            //  this.src=data.data
            this.getPersonalInfo();
            // this.personalInfo = data.data ? data.data : {};
            // this.isLogin = true;
            clearInterval(this.timer);
            clearInterval(this.timersta);
            clearInterval(this.timerlogin);
          } else {
          }
        });
      }, 2000);
    },
    ewmsx () {
      this.times = 60;
      // this.wxLogin();
      this.getCode();
      this.getUserlogin();
      this.wxLogin();
      // this.src='http://10.2.11.244:8100/zsrencai/api/ms/user/login/qrcode'

      this.$forceUpdate();
    },
    getCode () {
      this.show = false;
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          this.show = true;
          // this.src = require('@/assets/img/wxewmgq.png');
          clearInterval(this.timer);
          clearInterval(this.timersta);
          clearInterval(this.timerlogin);
        }
      }, 1000);
    }
  },
  computed: {
    swidth () {
      return (window.innerWidth * 0.9 * 0.4 * 320) / window.innerWidth / 90; // 370*320/(window.innerWidth)/20
    }
    // isLogin() {
    //     return localStorage.getItem('ps_Authorization');
    // }
  },
  mounted () {
    this.getCode();
    this.timestamp();
    this.getUserlogin();
    this.wxLogin();
    this.ps = localStorage.getItem('ps_Authorization');
    console.log(this.ps);
    // 检验登录状态
    if (this.ps) {
      this.getPersonalInfo();
    } else {
      // this.VerificationImg();
    }
    this.baseURL = process.env.VUE_APP_URL;
    // 根据当前登录状态改变顶部显示内容
    bus.$on('changeIsLogin', msg => {
      this.param = {
        phone: '',
        account: '',
        password: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: ''
      };
      this.isLogin = msg;
      // this.VerificationImg();
    });
  }
};
</script>

<style scoped>
.sweepLogin {
    /* width: 312px; */
    height: 100%;
    background: #ffffff;
}
.by-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.by-tab .line {
    color: #e9e9e9;
    font-size: 20px;
}
.accountLogin {
    border-left: 1px solid #e5e5e5;
    background: #f1f1f1;
}
.loginWidth {
    /* display: block; */
    /* width: 120px; */
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    /* cursor: pointer; */
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}
.active {
    font-size: 16px;
    color: rgba(34, 34, 34, 1);
}

/* .loginWidth.active,
.loginWidth:hover {
    color: rgba(34, 34, 34, 1);
} */
.loginWidth.active:before,
.loginWidth:hover:before {
    width: 40%;
}
.toCompany {
    font-size: 14px;
    font-weight: 600;
    /* color: rgba(24, 147, 252, 1); */
}
.fromIpt {
    position: relative;
    width: 80%;
    margin: 30px auto 0 auto;
}
.fromIpt /deep/ .el-input--small .el-input__inner {
    line-height: 40px;
    height: 40px;
    border-radius: 0px;
}
.btn {
    height: 41px;
    background: #fff;
    border-radius: 2px;
    line-height: 41px;
    text-align: center;
    font-size: 14px;
    color: #1893fc;
    cursor: pointer;
    border: 1px solid rgba(24, 147, 252, 1);
    margin: 0px auto 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.btn:hover {
    border: 2px solid rgba(29, 171, 251, 1);
    font-weight: 600;
}
.sendBtn {
    height: 41px;
    border-radius: 2px;
    line-height: 41px;
    text-align: right;
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    cursor: pointer;
    margin: 0px auto 0 auto;
}

.explain {
    font-size: 13px;
    color: #666666;
    margin-top: 37px;
    text-align: center;
}
.downLoad {
    font-size: 13px;
    color: #2090ff;
    margin-top: 8px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.VerificationImg {
    width: 94px;
    height: 40px;
    display: inline-block;
    cursor: pointer;
    background: rgba(239, 239, 239, 1);
}
.sendCode {
    margin-bottom: 18px;
}
.sendCode /deep/ .el-input-group__append {
    cursor: pointer;
    color: #1893fc;
    padding: 0;
    text-align: center;
    width: 94px;
}
.sendCode /deep/ .el-input-group__append .el-button.disabled {
    color: rgba(117, 117, 117, 1);
}
.setLogin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}
.register {
    display: flex;
    justify-content: space-between;
}
.register .el-link {
    display: inline-block;
    border-radius: 0px;
    width: 120px;
    height: 36px;
    background: rgba(24, 147, 252, 1);
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    opacity: 1;
}
.grid-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.grid-content.Info {
    /* width: calc(100%-40px); */
    margin-top: 20px;
    height: 120px;
    /* padding: 0 40px; */
    margin: 0 auto;
    width: 70%;
    /* background: chocolate; */
}
.grid-content.InfoSee {
    width: calc(100%-40px);
    height: 80px;
    /* padding: 0 40px; */
    margin: 0 auto 30px auto;
    width: 70%;
}
.InfoSee {
    margin-bottom: 30px;
}
.InfoSee .nums {
    font-size: 36px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 53px;
    text-align: center;
}
.InfoSee .colB {
    color: rgba(0, 211, 195, 1);
}
.InfoSee .colY {
    color: rgba(252, 164, 24, 1);
}
.InfoSee .qyfk {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    color: rgba(34, 34, 34, 1);
}
.InfoSee .imgIcon {
    cursor: pointer;
}
.Info {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
    height: 120px;
    /* padding: 0 40px; */
    margin: 0 auto;
    width: 70%;
}
.Info img {
    width: 72px;
    height: 72px;
    background: url('../../../assets/img/logoM.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    opacity: 1;
    margin-right: 20px;
}
.Info img.girl {
    background: url('../../../assets/img/logog.png') no-repeat;
    background-size: 100% 100%;
}
.captchaCode /deep/ input.el-input__inner {
    text-transform: uppercase;
}
.ewm {
    color: #cac3c3;
    margin-right: 10px;
}
.motk {
    position: absolute;
    top: 0;
    text-align: center;
    height: 243px;
    width: 249px;
    z-index: 1000;
    background: #f5f7fa;
    opacity: 0.6;
}
.motk img {
    margin-top: 40px;
}
.motk_title {
    position: absolute;
    top: 40px;
    left: 60px;
    width: 120px;
    color: red;
    z-index: 1001;
}
.login_count {
    border: 1px solid #e5e5e5;
    padding-bottom: 30px;
}
</style>
